部分檢視(Partial View)是指可以將整個檢視頁面其中的某個內容抽出來另外撰寫，需要使用時再透過方法叫用至頁面指定位置，這樣可以達到精簡程式碼與重複使用的目的。

如果有寫過Winform App或是Webform的人，應該會知道「使用者控制項」(User Control)這個東西，可以以此來理解部分檢視頁面的概念，下面就來說明使用的方式。

● 加入部分檢視頁面

我們用前面辛苦做的購物網站首頁View來當作範例，原本的Code如下：

@using DemoShoppingWebsite.Models
@model IEnumerable<table_Product>
@{
    ViewBag.Title = "商品瀏覽";
}

<div class="row" style="margin-top:10px">
    @foreach (var item in Model)
    {
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="~/image/@item.Image" style="width:300px;height:270px" />
                <div class="caption">
                    <h3>@item.Name</h3>
                    <h4>單價:@item.Price</h4>
                    <p>
                        <a href="@Url.Action("AddCar","Member")?ProductId=@item.ProductId" class="btn btn-primary">加入購物車</a>
                    </p>
                </div>
            </div>
        </div>
    }
</div>

例如想把foreach迴圈產生的HTML內容，用部分檢視的方式來呈現，作法如下：

1. 在專案「Shared」資料底下加入新的檢視頁面，名稱命名為「_ProductList」，範本模型依下圖選取，並勾選「建立成部分檢視」，選擇完後按「加入」。
   

2. View產生後，將原本Index頁面內foreach迴圈的內容剪下，並貼上到_ProductList.cshtml下面，完成後如下圖會看到出現錯誤，這是因為item字眼原本是在foreach內。
   

3. 將item字眼皆修改為Model，這樣就可以正確對應到模型，修改後完整Code如下：

@model DemoShoppingWebsite.Models.table_Product

<div class="col-md-4">
    <div class="thumbnail">
        <img src="~/image/@Model.Image" style="width:300px;height:270px" />
        <div class="caption">
            <h3>@Model.Name</h3>
            <h4>單價:@Model.Price</h4>
            <p>
                <a href="@Url.Action("AddCar","Member")?ProductId=@Model.ProductId" class="btn btn-primary">加入購物車</a>
            </p>
        </div>
    </div>
</div>

● Html.Partial 與 Html.RenderPartial

完成了Partial View後該如何叫用呢？這邊可以使用@Html.Partial() 或 @Html.RenderPartial()方法來呼叫，語法表示方式為：

@Html.Partial("部分檢視頁面名稱", 套用模型)

或

@{Html.RenderPartial("部分檢視頁面名稱", 套用模型);}

如果叫用的Partial View沒有使用model的話，後面參數就不需要了。

這邊要特別注意@Html.RenderPartial()的寫法需要搭配{ }與;才行，差異在於@Html.Partial()會回傳MvcHtmlString，而@Html.RenderPartial()是void方法，會將結果直接輸出為 ViewPage的Output Stream。

在效能上使用@Html.RenderPartial()會稍微高一些，不過並不會差很多，而且@Html.Partial()寫法更簡潔，所以要使用哪一種就看個人。

因此可以改寫Index View Code如下：

@using DemoShoppingWebsite.Models
@model IEnumerable<table_Product>
@{
    ViewBag.Title = "商品瀏覽";
}

<div class="row" style="margin-top:10px">
    @foreach (var item in Model)
    {
        @Html.Partial("_ProductList", item)
    }
</div>

或者

@using DemoShoppingWebsite.Models
@model IEnumerable<table_Product>
@{
    ViewBag.Title = "商品瀏覽";
}

<div class="row" style="margin-top:10px">
    @foreach (var item in Model)
    {
        Html.RenderPartial("_ProductList", item);
    }
</div>

這邊注意方法套用的模型應該是foreach迴圈的item，完成後可以執行看看畫面是否一樣能正確顯示。

● 小結

那麼今天的內容就這樣吧~明天繼續補充主題相關知識，SEE YOU！